<template>
	<view class="box">
		<uni-swiper-dot class="uni-swiper-dot-box" @clickItem=clickItem :info="info" :current="current" :mode="mode"
			:dots-styles="dotsStyles" field="content">
			<swiper class="swiper-box" @change="change" :current="swiperDotIndex">
				<swiper-item v-for="(item, index) in 3" :key="index">
					<view class="swiper-item" :class="'swiper-item' + index">
						<button v-if="index == 2" class="goto" @click="goto">进入APP ~ </button>
					</view>
				</swiper-item>
			</swiper>
			<button class="pass" @click="goto">跳过</button>
		</uni-swiper-dot>
	</view>
</template>

<script>
	export default {
		components: {},
		data() {
			return {
				info: [{
						colorClass: 'uni-bg-red',
						url: 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/shuijiao.jpg',
						content: '内容 A'
					},
					{
						colorClass: 'uni-bg-green',
						url: 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/shuijiao.jpg',
						content: '内容 B'
					},
					{
						colorClass: 'uni-bg-blue',
						url: 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/shuijiao.jpg',
						content: '内容 C'
					}
				],
				dotStyle: [{
						backgroundColor: 'rgba(0, 0, 0, .3)',
						border: '1px rgba(0, 0, 0, .3) solid',
						color: '#fff',
						selectedBackgroundColor: 'rgba(0, 0, 0, .9)',
						selectedBorder: '1px rgba(0, 0, 0, .9) solid'
					},
					{
						backgroundColor: 'rgba(255, 90, 95,0.3)',
						border: '1px rgba(255, 90, 95,0.3) solid',
						color: '#fff',
						selectedBackgroundColor: 'rgba(255, 90, 95,0.9)',
						selectedBorder: '1px rgba(255, 90, 95,0.9) solid'
					},
					{
						backgroundColor: 'rgba(83, 200, 249,0.3)',
						border: '1px rgba(83, 200, 249,0.3) solid',
						color: '#fff',
						selectedBackgroundColor: 'rgba(83, 200, 249,0.9)',
						selectedBorder: '1px rgba(83, 200, 249,0.9) solid'
					}
				],
				modeIndex: -1,
				styleIndex: -1,
				current: 0,
				mode: 'default',
				dotsStyles: {},
				swiperDotIndex: 0
			}
		},
		methods: {
			goto() {
				uni.switchTab({
					url: "/pages/tabbar/tabbar-1/tabbar-1"
				})
			},
			change(e) {
				this.current = e.detail.current
			},
			selectStyle(index) {
				this.dotsStyles = this.dotStyle[index]
				this.styleIndex = index
			},
			selectMode(mode, index) {
				this.mode = mode
				this.modeIndex = index
				this.styleIndex = -1
				this.dotsStyles = this.dotStyle[0]
			},
			clickItem(e) {
				this.swiperDotIndex = e
			},
			onBanner(index) {
				console.log(22222, index);
			}
		}
	}
</script>

<style scoped lang="scss">
	.box{
		margin-top: 50px;
		
	}
	.swiper-box {
		height: calc(100vh - 50px);
	}
	.pass{
		position: absolute;
		top: 70px;
		right: 20px;
		background-color: #9fe9f2;
		color: #61c791;
		height: 30px;
		line-height: 30px;
		border-radius: 30px;
	}

	.goto {
		border-radius: 20px;
		background-color: #c5f2f7;
		color: #fff;
		border: none;
		width: 90vw;
		margin-bottom: 100px;
	}

	.swiper-item {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column;
		justify-content: center;
		justify-content: flex-end;
		align-items: center;
		height: calc(100vh - 50px);
		color: #fff;
	}

	.swiper-item0 {
		// background: url("../../static/guide/guide1.png") no-repeat;
		background: url("https://img-baofun.zhhainiao.com/pcwallpaper_ugc_mobile/live/0666e859d148b12fdafeb45f7cc3b90a.mp4.jpg") no-repeat;
		background-size: 100% 100%;
	}

	.swiper-item1 {
		// background: url("../../static/guide/guide2.png") no-repeat;
		background: url('https://i0.hdslb.com/bfs/article/0f535036453f448e54e3c73316da9df01d03f60c.png@1256w_2314h_!web-article-pic.webp') no-repeat;
		background-size: 100% 100%;
	}

	.swiper-item2 {
		// background: url("../../static/guide/guide3.png") no-repeat;
		background: url("https://img-baofun.zhhainiao.com/pcwallpaper_ugc_mobile/live/37343e78c69c7d1cb5ee048fdea4fb84_preview.jpg") no-repeat;
		background-size: 100% 100%;
	}

	.image {
		width: 750rpx;
	}

	@media screen and (min-width: 500px) {
		.uni-swiper-dot-box {
			width: 400px;
			margin: 0 auto;
			margin-top: 8px;
		}

		.image {
			width: 100%;
		}
	}

	.uni-bg-red {
		background-color: #ff5a5f;
	}

	.uni-bg-green {
		background-color: #09bb07;
	}

	.uni-bg-blue {
		background-color: #007aff;
	}

	.example-body {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		padding: 20rpx;
	}

	.example-body-item {

		flex-direction: row;
		justify-content: center;
		align-items: center;
		margin: 15rpx;
		padding: 15rpx;
		height: 60rpx;
		/* #ifndef APP-NVUE */
		display: flex;
		padding: 0 15rpx;
		/* #endif */
		flex: 1;
		border-color: #e5e5e5;
		border-style: solid;
		border-width: 1px;
		border-radius: 5px;
	}

	.example-body-item-text {
		font-size: 28rpx;
		color: #333;
	}

	.example-body-dots {
		width: 16rpx;
		height: 16rpx;
		border-radius: 50px;
		background-color: #333333;
		margin-left: 10rpx;
	}

	.active {
		border-style: solid;
		border-color: #007aff;
		border-width: 1px;
	}
</style>